
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="/static/layui/css/layui.css">

</head>
<body>
<script src="/static/layui/layui.all.js"></script>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<table class="layui-table" lay-data="{height:315, url:'/user/all', page:true, id:'test'}" lay-filter="test">
    <thead>
    <tr>
        <th lay-data="{field:'u_id', width:100, sort: true}">用户ID</th>
        <th lay-data="{field:'u_name', width:80}">用户名</th>
        <th lay-data="{field:'u_pass', width:100}">用户密码</th>
        <th lay-data="{field:'u_email'}">用户邮箱</th>
        <th lay-data="{field:'u_gender'}">用户性别</th>
        <th lay-data="{field:'u_flag'}">FLAG</th>
        <th lay-data="{field:'u_role'}">ROLE</th>
        <th lay-data="{field:'u_code'}">CODE</th>
    </tr>
    </thead>
</table>
</body>
</html>--%>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/16 0016
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" href="/static/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>

<%--<div class="d[emoTable">
    名称：
    <div class="layui-inline">
        <input class="layui-input" name="nickname" id="demoReload1" autocomplete="off">
    </div>
    状态：
    <div class="layui-inline">
        <input class="layui-input" name="state" id="demoReload2" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>--%>
<%--     模态框        --%>
<div id="modleBox" style="display: none; margin: auto">
    <form action="/user/add" method="post">
        账号:<input type="text" name="u_name"><br>
        密码:<input type="text" name="u_pass"><br>
        email:<input type="email" name="u_email"><br>
        gender:<input type="text" name="u_gender"><br>
        flag:<input type="text" name="u_flag"><br>
        role:<input type="text" name="u_role"><br>
        code:<input type="text" name="u_code"><br>
        <fieldset class="layui-elem-field site-demo-button" style="margin: auto; border: solid 0px">
            <div style="margin-left: 160px">
                <button type="submit" class="layui-btn layui-btn-normal">提交</button>
            </div>
        </fieldset>
    </form>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
<script src="/static/layui/layui.all.js" charset="UTF-8"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>
<script type="text/html" id="btnDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    var tableRold;
    layui.use('table', function(){
        var table = layui.table;
        //方法级渲染
        tableRold=table.render({
            elem: '#LAY_table_user'
            ,url: '/user/all'
            ,toolbar: '#btnDemo'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'u_id', title: 'ID', width:100, sort: true, fixed: true,align:'center'}
                ,{field:'u_name', title: 'name', width:150,edit:'text',align:'center'}
                ,{field:'u_pass', title: 'pass', width:150,edit:'text',align:'center'}
                ,{field:'u_email', title: 'email', width:150,edit:'text',align:'center'}
                ,{field:'u_gender', title: 'gender',width:100,edit:'text',align:'center'}
                ,{field:'u_flag', title: 'flag',width:100,edit:'text',align:'center'}
                ,{field:'u_role', title: 'role', width:100,edit:'text',align:'center'}
                ,{field:'u_code', title: 'code', width:100,edit:'text',align:'center'}

                ,{field:'right', title: '操作', width:200,align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height:400
        });
        /*var $ = layui.$, active = {
            reload: function(){
                var demoReload1 = $('#demoReload1');
                var demoReload2 = $('#demoReload2');
                //执行重载
                table.reload('testReload', {
                    url:'/user/selectLike',
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        nickname: demoReload1.val(),
                        state:demoReload2.val()
                    }
                }, 'data');
            }
        };*/
        //监听工具条
        table.on('tool(user)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                // alert(data.u_id);
                $.ajax({
                    type: "post",
                    url: "/user/update",
                    data: {
                        u_id:data.u_id,
                        u_name:data.u_name,
                        u_pass:data.u_pass,
                        u_email:data.u_email,
                       u_gender:data.u_gender,
                        u_flag:data.u_flag,
                        u_role:data.u_role,
                        u_code:data.u_code
                    },
                    success: function (mess) {
                        tableRold.reload();
                    },
                    dataType:'json'
                });
            }
        });

        //监听头工具栏事件
        table.on('toolbar(user)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data;  //获取选中的数据
            alert(checkStatus);
            alert(data);
            if(obj.event === 'del'){
                var idArry=data[0].u_id;
                alert("===b====")
                for(var i=1;i<data.length;i++){
                    alert(data[i].u_id);
                    idArry+=","+data[i].u_id;
                }
                alert(idArry);
                $.ajax({
                    type:"DELETE",
                    url:"/user/delete/"+idArry,
                    dataType:'json',
                    success:function (mess) {

                        tableRold.reload();
                    }
                });
            }else if(obj.event === 'add'){
                layui.use(['layer'],function () {
                    var layer = layui.layer,$=layui.$;
                    layer.open({
                        type: 1
                        ,area:['400PX','300PX']
                        , content: $('#modleBox')
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        ,zIndex:layer.zIndex
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>



